<template>
  <a-layout class="layout">
    <!--    左侧layout-sider-->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <!--      side图像-->
      <div class="logo"/>
      <Menu :addTabs="addTabs"></Menu>
    </a-layout-sider>

    <!--右侧部分-->
    <a-layout>
     <!--右侧面板上面的功能节点-->
      <a-layout-header style="background: #fff; padding: 0">
      <!--通过栅栏来完成元素位置-->
        <a-row>
          <a-col :span="22">
            <menu-unfold-outlined
                v-if="collapsed"
                class="trigger"
                @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
          </a-col>
          <a-col :span="2" style="padding-right: 0px">
            <UserCenter></UserCenter>
          </a-col>
        </a-row>

      </a-layout-header>
      <!--右侧面板页面-->
      <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff' }"
      >
        <!-- 生成 tabs 父签功能页-->
        <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit">
          <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
            <component :is="pane.content"></component>
          </a-tab-pane>
        </a-tabs>

      </a-layout-content>
    </a-layout>

  </a-layout>
</template>
<script lang="ts" setup>

import {ref,shallowRef,defineAsyncComponent} from 'vue';
import Menu from "./Menu.vue";

const panes = shallowRef<Menu[]>([
  { title: '首页', content: defineAsyncComponent(() => import('@/views/welcome/Welcome.vue')), key: 1 ,closable:false},
]);

const collapsed = shallowRef<boolean>(false);
const activeKey = shallowRef(panes.value[0].key);

/**
 * 向tabs里面添加新的面板，用来给子元素 Menu调用,这里先做一次拆分，后期再考虑
 * @param itemMenu  组件信息
 */
const addTabs = (itemMenu:Menu)=>{
  let exists = false;
  for(let i in panes.value){
    if(panes.value[i].key === itemMenu.key){
      exists = true;
    }
  }
  //重复点击切换问题
  if(!exists){
    panes.value.push({
      title: itemMenu.title,
      content: itemMenu.context,
      key: itemMenu.key
    });
  }
  activeKey.value = itemMenu.key;
}

/**
 * 声明tabs删除 tab操作，完成不用元素删除操作
 *  官网直接使用，没做任何处理
 * @param targetKey 目标key
 */
const remove = (targetKey: string) => {
  let lastIndex = 0;
  panes.value.forEach((pane, i) => {
    if (pane.key === targetKey) {
      lastIndex = i - 1;
    }
  });
  panes.value = panes.value.filter(pane => pane.key !== targetKey);
  if (panes.value.length && activeKey.value === targetKey) {
    if (lastIndex >= 0) {
      activeKey.value = panes.value[lastIndex].key;
    } else {
      activeKey.value = panes.value[0].key;
    }
  }
};

/**
 * 用来监听  @edit="onEdit"
 * @param targetKey 目标key
 */
const onEdit = (targetKey: string | MouseEvent) => {
    remove(targetKey as string);
};
</script>
<style>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  margin: 16px;
  background: aqua;
}

.layout {
  /*声明当前组件的高度为全部*/
  min-height: calc(100vh);
}

</style>
